<template>
  <div class="demo-music">
    <ul id="waves" class="movement">
      <li class="li1"><span class="ani-li"/></li>
      <li class="li2"><span class="ani-li"/></li>
      <li class="li3"><span class="ani-li"/></li>
      <li class="li4"><span class="ani-li"/></li>
      <li class="li5"><span class="ani-li"/></li>
      <li class="li6"><span class="ani-li"/></li>
    </ul>
  </div>
</template>
<style lang="less" scoped>
.demo-music {
  text-align: center;
  position: relative;
  height: 100px;
}
.demo-music #waves {
  height: 60px;
  display: inline-block;
  transform: rotateX(180deg);
  transform-origin: left center;
}
.demo-music #waves li {
  position: relative;
  float: left;
  height: 100%;
  width: 40px;
  overflow: hidden;
  margin-right: 1px;
}
.demo-music #waves li span {
  display: block;
  height: 100%;
  width: 100px;
  background: #09f;
}
// 关键代码
.demo-music #waves .li1 span {
  animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li2 span {
  animation: waves 0.9s linear 0s infinite alternate;
}
.demo-music #waves .li3 span {
  animation: waves 1s linear 0s infinite alternate;
}
.demo-music #waves .li4 span {
  animation: waves 0.8s linear 0s infinite alternate;
}
.demo-music #waves .li5 span {
  animation: waves 0.7s linear 0s infinite alternate;
}
.demo-music #waves .li6 span {
  animation: waves 0.8s linear 0s infinite alternate;
}

@keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}
</style>
